<script setup lang="ts">
import { showLoadingToast } from 'vant'
import { ref } from 'vue'

defineOptions({
  name: 'Identify',
})

const show = ref(false)

const identifyFn = () => {
  showLoadingToast({
    duration: 2000,
    message: '正在识别中...',
    forbidClick: true,
    loadingType: 'spinner',
    onClose: showResult,
  })
}

const showResult = () => {
  show.value = true
}

const fileIptRef = ref<null | HTMLInputElement>(null)

const uploadFn = () => {
  fileIptRef.value!.click()
}

const fileUploadFn = (e: Event) => {
  console.log((e.target as HTMLInputElement).files)
}
</script>

<template>
  <div class="identify-page">
    <div class="identify-form">
      <img
        src="https://mushroom-front.oss-cn-shanghai.aliyuncs.com/banner/carousel-img04.jpg"
        alt=""
      />
      <input type="file" hidden ref="fileIptRef" @change="fileUploadFn" />
      <van-button type="success" @click="uploadFn">上传图片</van-button>
      <van-button type="primary" @click="identifyFn">识别蘑菇</van-button>
    </div>
  </div>
  <van-popup
    v-model:show="show"
    position="bottom"
    :style="{ height: '60%' }"
    closeable
    close-icon-position="top-right"
  >
    <p>该蘑菇最有可能的品种为: 红蘑菇</p>
  </van-popup>
</template>

<style scoped lang="less">
.identify-page {
  height: calc(100vh - 52px);

  .identify-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;

    text-align: center;
    margin-top: 16px;
    img {
      width: 200px;
      height: 200px;
      object-fit: cover;
      border-radius: 4px;
    }

    .van-button {
      width: 200px;
    }
  }
}

.van-popup {
  border-radius: 16px 16px 0 0;
  padding: 48px 16px;
}
</style>
